<template>
  <div class="resources-panel-container">
    <div class="resource-list-container">
      <div class="resource-item" v-for="item in resourcesList" :key="item.id">
        <div class="resource-item-icon" v-if="item.uiView.icon">
          {{ item.uiView.icon }}
        </div>
        <div
          class="resource-item-name"
          :style="{ color: item.uiView.color || 'rgb(220, 220, 220)' }"
        >
          {{ item.details.name }}
        </div>
        <div :class="['resource-item-value', { 'value-max': isMax(item) }]">
          {{ formatValue(item.details.value, item.uiView.decimal) }}
        </div>
        <div :class="['resource-item-max']">
          {{ item.details.max ? ` / ${formatMax(item.details.max)}` : '' }}
        </div>
        <div class="resource-item-rate" v-if="item.details.rate > 0">
          {{ formatRate(item.details.rate) }} / 秒
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useResourcesStore, useGameStore } from '@/store'
import { cloneDeep } from 'lodash'
import type { Resource, ResourcesData } from '@/types/resource'

const resourcesStore = useResourcesStore()

const resourcesList = computed(() => {
  const _obj: ResourcesData = cloneDeep(resourcesStore.data)
  const _list = Object.values(_obj)
  return _list.filter((item) => item.enabled)
})

const formatValue = (value: number, decimal?: number) => {
  const _decimal = decimal || 0
  if (value >= 10000) {
    return (value / 1000).toFixed(_decimal + 1) + 'k'
  }
  return value.toFixed(_decimal)
}

const formatMax = (max: number) => {
  if (max >= 10000) {
    return max / 1000 + 'k'
  }
  return max
}

const formatRate = (rate?: number) => {
  if (rate && rate >= 0) {
    return '+' + (rate ?? 0)
  } else if (rate && rate < 0) {
    return '-' + (rate ?? 0)
  } else {
    return '0'
  }
  return rate
}

// 是否达到上限
const isMax = computed(() => (item: Resource) => {
  return item.details.value >= item.details.max
})
</script>

<style lang="less" scoped>
@import '@/style/resourcePanel.less';
</style>
